import React, {Component} from 'react';
import { Image,View, Text,StyleSheet,Dimensions,ScrollView,TouchableOpacity } from 'react-native';
import {WhiteSpace,Flex,ActivityIndicator,List,Toast,Carousel,Tabs} from 'antd-mobile-rn';
import Layout from '../components/Layout';
import { post } from '../utils/request';
import SyList from '../components/SyList';
import config from '../config';
import tool from '../utils/tool';
import CImage from '../components/CImage';
import AutoImage from '../components/AutoImage';
import PlayImage from '../components/PlayImage';


export default class Video extends Component {
    //构造函数
    constructor(props) {
        super(props);
        this.state = {
            loading:false,
            category:[],
            datalist:[],
            selectcategory:0,
            pageCurrent: 1,
            pageSize: 10,
            selecttab:0,
        };
    }
    //组件加载
    componentDidMount() {
        post("/openapi/getcategory/",{
            category:"video"
        },(r)=>{
            let cs=[];
            r.data.forEach(c => {
                cs.push({title:c.name,data:c});
            });
            this.setState({
                category:cs,
                selectcategory:cs[0].data.value
            },()=>{
                this.loadData();
            });
           
        },(e)=>{
            Toast.fail(e.message,3);
        },(s)=>{
            this.setState({loading:s});
        });
    }

    //组件卸载
    componentWillUnmount() {

    }
    //属性改变
    componentWillReceiveProps(nextProps) {
    }

    loadData=()=> {
        //document.title="精选视频-"+config.sitename;
        // console.log("加载");
        // console.log({
        //     category:1,
        //     subcategory:this.state.selectcategory,
        //     pageindex:this.state.pageCurrent,
        //     pagesize:this.state.pageSize,
        //     selecttab:0,
        // });
        post("/openapi/getInfoByCategory/",{
            category:1,
            subcategory:this.state.selectcategory,
            pageindex:this.state.pageCurrent,
            pagesize:this.state.pageSize,
        },(r)=>{
            //console.log(r);
            this.setState({
                datalist: this.state.datalist.concat(r.data)
            });
        },(e)=>{
            Toast.fail(e.message,3);
        },(s)=>{
            this.setState({loading:s});
        });
    }

    tabClick=(tab,index)=>{
        //console.log(index);
        this.setState({
            datalist:[],
            selectcategory:tab.data.value,
            pageCurrent:1,
            selecttab:index,
        },()=>{
            this.loadData();
        });
    };

    listItemClick=(id)=>{
        this.props.navigation.navigate('VideoDetail',{id:id});
    }

    renderRow = (o) => {
        let item = o.item;
        //console.log(item);
        //onClick={()=>this.listItemClick(item.id)}
        return (
            <TouchableOpacity style={{backgroundColor:"white"}} key={item.id} onPress={()=>{this.listItemClick(item.id)}}  >
                <Flex style={[st.row,{flex:1,flexDirection:"column",alignItems:"flex-start"}]}>
                    <Flex style={{flex:1}}>
                        <Text numberOfLines={1} style={st.title} >{item.title}</Text>
                    </Flex>
                    <Flex style={{flex:1}}>
                        <PlayImage  
                        width={Dimensions.get("window").width-10}
                        source={{uri: tool.getimageurl(Dimensions.get("window").width-10,0,0.9,item.imgurl), cache: 'force-cache'}}>
                        </PlayImage>
                    </Flex>
                </Flex>
             </TouchableOpacity>
        );
    };

    onEndReached=()=> {
        this.setState({
            pageCurrent: this.state.pageCurrent + 1
        }, () => {
            this.loadData();
        });
    }



    render() {
        return (
            <Layout selectedTab={"Video"} {...this.props}>
                    <View style={{height:38}}>
                        <Tabs  tabs={this.state.category} initialPage={0} animated={false}  page={this.state.selecttab} onTabClick={this.tabClick}>
                        </Tabs>
                    </View>
                    <View style={{flex:1}}>
                        <SyList
                                data={this.state.datalist}
                                renderItem={this.renderRow}
                                pageSize={this.state.pageSize}
                                pageCurrent={this.state.pageCurrent}
                                onEndReached={this.onEndReached}
                                refreshing={1}
                                onEndReachedThreshold={0.05}
                                //onEndReachedThreshold={5}
                            />
                        <ActivityIndicator
                            toast
                            size="large"
                            text="数据加载中..."
                            animating={this.state.loading}
                        />
                        </View>
            </Layout>
        );
    }
}

const st = StyleSheet.create({
    row:{
        marginLeft:5,
        marginRight:5,
    },
    title:{
        lineHeight: 25,
        fontSize: 17,
        backgroundColor: "white",
        color:"black"
    },
  });
